<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要BB的内容（最多120字）" maxlength="120" cols="30" rows="4"></textarea>

        <mt-button type="primary" size="large">发表评论</mt-button>

        <!--<div class="cmt-list">
            <div class="cmt-item" v-for="(item, i) in comments" :key="item.add_time">
                <div class="cmt-title">
                    第{{i+1}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间:{{item.add_time | dateFormat}}
                </div>
                <div class="cmt-body">
                    {{item.content === 'undefined' ? '此用户很懒，嘛都没说':item.content}}
                </div>
            </div>
        </div>-->
        <div class="cmt-list">
            <div class="cmt-item">
                <div class="cmt-title">
                    第1楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间:2019.11.01 12:12:12
                </div>
                <div class="cmt-body">
                    小荷才露尖尖角，早有蜻蜓立上头。
                </div>
            </div>
        </div>
        <div class="cmt-list">
            <div class="cmt-item">
                <div class="cmt-title">
                    第2楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间:2019.11.01 12:12:13
                </div>
                <div class="cmt-body">
                   床前明月光，疑是地上霜。
                </div>
            </div>
        </div>
        <div class="cmt-list">
            <div class="cmt-item">
                <div class="cmt-title">
                    第3楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间:2019.11.01 12:12:14
                </div>
                <div class="cmt-body">
                   举头望明月，低头思故乡。
                </div>
            </div>
        </div>
        <div class="cmt-list">
            <div class="cmt-item">
                <div class="cmt-title">
                    第4楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间:2019.11.01 12:12:13
                </div>
                <div class="cmt-body">
                   锄禾日当午，汗滴禾下土。
                </div>
            </div>
        </div>
        <div class="cmt-list">
            <div class="cmt-item">
                <div class="cmt-title">
                    第5楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间:2019.11.01 12:12:15
                </div>
                <div class="cmt-body">
                   窈窕淑女君子好逑。
                </div>
            </div>
        </div>
        <div class="cmt-list">
            <div class="cmt-item">
                <div class="cmt-title">
                    第6楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间:2019.11.01 12:12:16
                </div>
                <div class="cmt-body">
                   踏破铁皮无觅处，得来全不费功夫。
                </div>
            </div>
        </div>
        <div class="cmt-list">
            <div class="cmt-item">
                <div class="cmt-title">
                    第7楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间:2019.11.01 12:12:17
                </div>
                <div class="cmt-body">
                   才下眉头，却上心头。
                </div>
            </div>
        </div>

        <mt-button type="danger" size="large" plain>加载更多</mt-button>
<!--        <mt-button @click="getMore" type="danger" size="large" plain>加载更多</mt-button>-->
    </div>
</template>

<script>
    import {Toast} from "mint-ui"
    export default {
        data() {
            return {
                pageIndex: 1, //默认展示第一页数据
                comments: []
            };
        },
        /*created() {
            this.getComments();
        },*/
        /*methods: {
            getComments() {
                this.$http.get("api/getcomments/"+this.id+"?pageindex="+this.pageIndex).then(results=>{
                    if (results.body.status === 0) {
                        //两个数组拼接
                        // this.comments = results.body.message;
                        this.comments = this.comments.concat(results.body.message)
                    } else {
                        Toast("获取评论失败!");
                    }
                })
            },
            getMore() {
                //加载更多
                this.pageIndex++;
                this.getComments();
            }
        },*/
        props:["id"]
    }
</script>

<style lang="scss" scoped>
    .cmt-container{
        h3{
            font-size: 18px;
        }
        textarea{
            font-size: 14px;
            height: 85px;
            margin: 0;
        }
        .cmt-list{
            margin:10px 0;
            .cmt-item{
                font-size: 13px;
                .cmt-title{
                    line-height: 20px;
                    background-color: #ccc;
                }
                .cmt-body{
                    line-height: 30px;
                    text-indent: 2em;
                }
            }
        }


    }
</style>